<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>猎舞网</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
		<link rel="stylesheet" href="__PUBLIC__static/lib/weui.min.css">
		<link rel="stylesheet" href="__PUBLIC__static/css/jquery-weui.css">
		<link rel="stylesheet" href="__PUBLIC__static/css/style.css">
		<style type="text/css">
			body {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100vh;
				background-image: url(__PUBLIC__static/images/bg.png);
				background-size: 100% 95%;
				background-position: 0px 96%;
				background-repeat: no-repeat;
			}
			
			.lg-title {
				position: relative;
				width: 100%;
				height: 56px;
				background-color: black;
			}
			
			.backw {
				position: absolute;
				width: 30px;
				top: 25%;
				left: 9px;
			}
			
			.lg-title span {
				font-family: FZLTZHK;
				font-size: 22px;
				color: #FFFFFF;
				line-height: 56px;
			}
			
			.img {
				position: absolute;
				width: 100%;
				text-align: center;
				top: 13%;
			}
			
			.liewuimg {
				width: 100px;
			}
			
			.login-form {
				position: absolute;
				width: 100%;
				margin: 50% auto;
			}
			
			.phone {
				width: 100%;
				border-bottom: 1px solid #E0E0E0;
				position: relative;
				margin-bottom: 20px;
			}
			
			.phone p {
				float: left;
				color: #333333;
				margin-right: 20px;
				margin-top: 5px;
				font-family: simhei[Regular];
				font-size: 18px;
			}
			
			.phone input {
				margin-top: 5px;
				float: left;
				border: none;
				height: 32px;
				font-size: 14px;
			}
			
			.phone input:focus {
				outline: none;
			}
			
			#submit {
				position: absolute;
				width: 95%;
				top: 200px;
				left: 10px;
                background:url("__PUBLIC__static/images/ok.png") no-repeat;
                background-size:100%;
                height:65px;
                border:none;
			}
			
			.phone i img {
				position: absolute;
				right: 30px;
				top: 10px;
				width: 25px;
			}
			
			.getyanz {
				position: absolute;
				right: 10px;
				top: 0px;
			}
		</style>
	</head>

	<body ontouchstart>
		<!--主体-->
		<div class="login-box">
			<div class="lg-title">
				<img class="backw" src="__PUBLIC__static/images/backwhite.png" alt="" />
				<span>猎舞网</span>
			</div>
			<div class="img">
				<img class="liewuimg" src="__PUBLIC__static/images/logo.png" />
			</div>
			<div class="login-form">

					<div class="login-user-name common-div">
						<div class='phone clear'>
							<p>手机号</p>
							<input id="phone" type="text" placeholder="" value="">
						</div>
					</div>
					<div class='phone clear'>
						<p>验证码</p><input type="text" id="tel" placeholder="">
						<div class="getyanz">获取验证码</div>
					</div>
					<div class="login-user-pasw common-div">
						<div class='phone clear'>
							<p>新密码</p><input id="pwd" type="password" placeholder="">
							<i onclick="change()"><img src="__PUBLIC__static/images/zhengkai.png" class="look"/></i>
						</div>
					</div>
					<input id="submit" type="button" />

			</div>
		</div>
		<script src="__PUBLIC__static/lib/jquery-2.1.4.js"></script>
		<script src="__PUBLIC__static/lib/fastclick.js"></script>
		<script type="text/javascript" src="__PUBLIC__static/js/jquery.Spinner.js"></script>
		<script src="__PUBLIC__static/js/jquery-weui.js"></script>
		<script type="text/javascript">
			$(".look").on("click", function() {
				$("#pwd").show();
			})
			$(".backw").on("click", function() {
				window.history.back(-1);
			});
			$(".getyanz").on("click", function() {
				console.log($("#phone").val());
				$.ajax({
					type: 'POST',
					url: "changepwd2",
					data: {
						phone: $("#phone").val(),
					},
					dateType: "json",
					success: function(xhr) {
						console.log(xhr.status);
						switch(xhr.status) {
							case 1:
								alert("验证码发送成功，请注意查收");
								break;
							case -1:
								alert(xhr.message);
								break;
							case 0:
							     alert(xhr.message);
								 break;
						}
					}
				})
			})
			$("#submit").on("click", function() {
				$.ajax({
					type: 'POST',
					url: "changepwd3",
					data: {
						phone: $("#phone").val(),
						tel: $("#tel").val(),
						pwd: $("#pwd").val(),
					},
					dateType: "json",
					success: function(xhr) {
						switch(xhr.status) {
							case 1:
								alert(xhr.message);
								break;
							case 0:
								alert(xhr.message);
								break;
							case -1:
								alert(xhr.message);
								break;
						}
					}
				})
			});
			//显示隐藏密码
			var isShow = true;

			function change() {
				var v = document.getElementById("pwd");
				if(isShow) {
					v.type = "text";
					isShow = false;
				} else {
					v.type = "password";
					isShow = true;
				}
			};
		</script>
	</body>

</html>